// 声明的公共样式
.ctn {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 外层的容器
.box {
  position: relative;
  background-color: rgb(241, 240, 240);
  // 可见区域
  height: 100vh;
  margin: 0 auto;
  width: 375px;
  min-width: 375px;
  margin: 0 auto;

  // 1 头部
  .header {
    height: 50px;
    background-color: #eb4450;
    color: #fff;
    .ctn();
  }
  // 2 主体
  // .main {
  // }

  // 3 页脚
  .footer {
    background-color: #fff;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 50px;
    border-top: 1px solid #ddd;
    display: flex;
    & > div {
      height: 100%;
      flex: 1;
      font-size: 14px;
      color: rgb(105, 102, 102);
      .iconfont {
        font-size: 16px;
      }
      .ctn();
    }
    .kefu {
      flex-direction: column;
    }
    .share {
      flex-direction: column;
      flex: 0.7;
    }
    .cart {
      flex-direction: column;
    }
    .add-cart {
      background-color: #ffa500;
      color: #fff;
      flex: 1.3;
      font-weight: 700;
      font-size: 15px;
    }
    .buy-now {
      background-color: #eb4450;
      color: #fff;
      flex: 1.3;
      font-weight: 700;
      font-size: 15px;
    }
  }
}
